<template>
  <el-dialog v-loading="loading" :title="title"
             :width="width"
             :append-to-body="true"
             :close-on-click-modal="false"
             model-value:visible="showDialog"
             @close="hiddenView">
    <flexbox class="content">
      <div class="cropper-box">
        <vueCropper ref="refCropper"
                    :can-move="true"
                    :auto-crop="true"
                    :fixed="true"
                    :fixed-number="fixedNumber"
                    :img="cropperImg"
                    output-type="png"
                    @realTime="realTime"/>
      </div>
      <div class="preview">
        <div class="preview-name">预览</div>
        <img
            :style="{'width': previewWidth, 'height': previewHeight, 'border-radius': previewRadius}"
            :src="previewImg"
            class="preview-img">
      </div>
    </flexbox>
    <template v-slot:footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submiteImage()">{{ saveButtonTitle }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import VueCropper from 'vue-cropper'
import {getCurrentInstance, onMounted, ref, watch} from "vue";

defineOptions({
  name: 'EditImage', // 处理头像
})

// 引入消息总线
const cxt = getCurrentInstance() //相当于Vue2中的this
const bus = cxt.appContext.config.globalProperties.$bus

const props = defineProps({
  width: {
    type: String,
    default: '450px'
  },
  title: {
    type: String,
    default: '编辑头像'
  },
  saveButtonTitle: {
    type: String,
    default: '开始上传'
  },
  show: {
    type: Boolean,
    default: false
  },
  fixedNumber: {
    type: Array,
    default: () => {
      return [1, 1]
    }
  },
  previewWidth: {
    type: String,
    default: '70px'
  },
  previewHeight: {
    type: String,
    default: '70px'
  },
  previewRadius: {
    type: String,
    default: '35px'
  },
  file: [File],
  image: String
})

const emits = defineEmits(['close', 'save'])

const refCropper = ref()
const loading = ref(false)
const showDialog = ref(false)
const cropperImg = ref('')
const previewImg = ref('')

watch(() => props.show, (val) => {
      showDialog.value = val
    }, {
      deep: true,
      immediate: true
    }
)
watch(() => props.image, (val) => {
  cropperImg.value = val
})


onMounted(() => {
  cropperImg.value = props.image
})

function realTime(data) {
  refCropper.value.getCropData(cropperData => {
    previewImg.value = cropperData
  })
}

function submiteImage() {
  // 获取截图的blob数据
  refCropper.value.getCropBlob(data => {
    emits('save', {
      blob: data,
      file: props.file,
      image: previewImg.value
    })
    hiddenView()
  })
}

function hiddenView() {
  emits('close')
}
</script>


<script type="text/javascript">
export default {
  components: {
    // VueCropper
  },
  props: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  mounted() {
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.cropper-box {
  width: 300px;
  height: 300px;
  margin-right: 15px;
}

.preview {
  position: absolute;
  bottom: 0;
  right: 0;

  .preview-name {
    margin-bottom: 8px;
    font-size: 13px;
    color: #666;
  }

  .preview-img {
    display: block;
  }
}

.content {
  position: relative;
  padding: 0 30px;
}
</style>
